<script setup>
import { defineProps } from 'vue';

defineProps({
  isVisible: {
    type: Boolean,
    default: false
  }
});
</script>

<template>
  <div class="forum-header" :class="{ 'animate': isVisible }">
    <span class="subtitle">Community</span>
    <h2 class="title">相聚来华论坛，畅聊在华的那些事儿</h2>
    <p class="description">
      Connect with fellow travelers, share experiences, and get advice from those who have already explored China.
      Our forum is the perfect place to ask questions and make your journey smoother.
    </p>
  </div>
</template>

<style scoped>
/* 头部样式 */
.forum-header {
  text-align: center;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.forum-header.animate {
  opacity: 1;
  transform: translateY(0);
}

.subtitle {
  font-size: 1.5rem;
  color: #00c389;
  font-weight: 600;
  display: block;
  margin-bottom: 16px;
}

.title {
  font-size: 2.5rem;
  color: #2a2d32;
  font-weight: 700;
  margin: 0 0 20px;
}

.description {
  max-width: 800px;
  margin: 0 auto;
  color: #666;
  font-size: 1.1rem;
  line-height: 1.6;
}

@media (max-width: 576px) {
  .subtitle {
    font-size: 1.2rem;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .description {
    font-size: 1rem;
  }
}
</style> 